<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<meta name="viewport" content="width=device-width,initial-scale = 1,maxinum-scale=1,minimun-scale=1,user-scalable=no"/>
		<title>注册界面</title>
		<link rel="stylesheet" type="text/css" href="stylesheets/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="stylesheets/animate.css"/>
		<style type="text/css">
			html,body{
				width: 100%;
				height: 100%;
				margin: 0;
				
			}
			header {
				width: 100%;
				margin-bottom: 0.2rem;
				height: 0.44rem;
			}
			body{			
				overflow-x: hidden;
			}
			header span {
				cursor: pointer;
			}
			html{
				font-size: 100px;
			}
			.input-group{margin-bottom: 0.2rem;}
			.formBtn{width:100px;height: 40px;border: none;border-radius:5px ;}
			
			.movePhoto {
				animation: movePhoto 1s linear both;
				animation-delay: 1s;
				
			}
			@keyframes movePhoto{
				from{top:-1.5rem;}
				to{top:10%}
			}
			.changeOp{
				animation: changeOp 1s linear both;
				animation-delay: 2s;
			}
			@keyframes changeOp{
				from{opacity: 0;}
				to{opacity: 1;}
			}
			.input-group {
				
				border: 1px solid #ccc;
				height: 1rem !important;
				line-height: 1rem;
				box-shadow: 2px 0 5px  #C0C0C0;
			}
		
			
			.input-group input{
				border: none;
				/*background-color: #ccc;*/
				height: 1rem;
				background-color: white;
			}
			.input-group label {
				border: none;
				background-color: white;
			}
			.roll {
				animation: roll 1s ease-in both;
			}
			
			@keyframes roll{
				from{transform:  translateX(0) rotate(0);}
				to{transform:  translateX(10rem) rotate(360deg);}
			}
			
			.rollBack {
				animation: rollBack 1s ease-in-out both;
			}
			
			@keyframes rollBack{
				from{transform: translateX(10rem) rotate(360deg);}
				to{transform: translate(0) rotate(0);}
			}
			#getVCode:hover {
				background-color: #ccc;
				color: white;
			}
			
			.rot{
				animation: rot 2s ease-in;
				transform-origin: right;
			}
			@keyframes rot{
				from{transform: rotateY(0);opacity: 1;}
				to{transform: rotateY(-180deg);opacity: 0;}
			}
			
			.turn{
				animation:  turn 2s ease-in-out;
				transform-origin: right;
			}
			
			@keyframes turn{
				from{transform: rotateY(180deg);opacity: 0;}
				to{transform: rotateY(0);opacity: 1;}
			}
			#goback{
				width: 30px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				position: absolute;
				left: 10px;
				top: 10px;
				background-color: #5CB85C;
				border-radius:50% ;
				color:white;
				cursor: pointer;
			}
				
			.roback1{
				animation: roback1 1s ease-in-out;
				transform-origin: right;
			}
				
			@keyframes roback1{
				from{transform: rotateY(0deg);opacity: 1;}
				to{transform: rotateY(180deg);opacity: 0;}
			}	
			
			.roback2 {
				animation:  roback2 1s ease-in-out;
				transform-origin: right;
			}
			@keyframes roback2{
				from{transform: rotateY(-180deg);opacity: 0;}
				to{transform: rotateY(0deg);opacity: 1;}
			}	
						
		</style>
	</head>
	<body>	
		<a id="goback"><span class="glyphicon glyphicon-chevron-left"></span></a>
		
		<!--顶部提示框-->
			<div id="modal" class="container" style="position: absolute;left: 20;display: none;">
				<div  class="panel panel-warning " style="width: 4rem; height: 1rem !important;margin: 0 auto;">
				<div class="panel-heading text-center" style="width: 4rem; height: 1rem  !important; line-height: 1rem; line-height: 0.1rem;">
					<p id="success-rt">欢迎您成为吐槽小兵</p>					
					<p>即将为您跳转到首页</p>
				</div>
			</div>			
		</div>	
		<!-- 用户头像 -->
		<section id="userPhoto" class="text-center movePhoto " style="position: absolute;top:-1rem;left:calc(50% - 0.75rem) ;transform-style: preserve-3d">
			<div class="text-center" style="width:1.5rem;height:1.5rem;margin:0 auto;border-radius:50% ;border: 2px solid white;line-height: 1.5rem;background: rgba(255,255,255,0.1);background:radial-gradient(at 35px 35px,#ccc,#fff,#ccc)">
				<span class="glyphicon glyphicon-user" style="font-size: 20px;display: inline-block;"></span>
			</div>			
		</section>		
		<!-- 登陆表单 -->
		<section id="login-form" style="position: relative;top: 3rem;transform-style:preserve-3d" class="changeOp">
			<button id="registerBtn" class="btn btn-default " style="position: absolute;right: 0.3rem;top: -0.65rem;border-bottom:none;background-color: #F5F5F5;border-color: #ccc;">注册</button>
			<div class="container" >				
				<div class="panel panel-default" style="box-shadow: 2px 2px 2px 2px #ccc;border: none;">
					<div class="panel-heading text-center">
						<span style="font-size: 0.4rem;color: #555;">Sign in</span>
					</div>
					<div class="panel-body" style="position: relative;">
						<div class="errorTit" class="text-center " style="height: 0.7rem;line-height: 0.7rem; position: absolute;top: 0;left:16px; display: none;z-index: 1000;background-color:lightcoral;color: white;padding-left: 10px;padding-right: 10px;">
							<span class="glyphicon glyphicon-warning-sign"></span>&nbsp;&nbsp;<span id="errtitle">用户名密码错误</span>
						</div>
					<form class="bs-example bs-example-form" role="form" action="" method="post" >																						
				 	<div class="input-group">
						<label for="phone" class="input-group-addon">手机号码:</label><input class="form-control" type="text" name="phone" required id="phone" value="" placeholder="请输入您的手机号码" autocomplete="off" pattern="^1[3|4|5|7|8]\d{9}$" />
					</div>								
					<div class="input-group " >						
					 <input class="form-control" required="required" type="password" name="pwd" id="pwd" value="" placeholder="请填写密码" pattern="^[0-9a-zA-Z]{6,10}$" />
					 <label class="input-group-addon" for="pwd">密码:</label>
					</div>
					<div style="position: relative;margin-bottom: 0.2rem;">						
					 <input type="checkbox" name="isRemember" id="remember" value="remember"  />&nbsp;<span style="display: inline-block;position: absolute;top: 0.01rem;">记住我</span><a id="fgtBtn" class="pull-right">忘记密码?</a>
					</div>
					<input class="form-control btn-success" type="submit" value="登陆" style="letter-spacing: 0.1rem;"/>
				</form>
					</div>				
				</div>			
			</div>
			
		</section>
		<!-- 注册表单-->
		<section id="register-form"  style=" position: absolute;top:13%;left:0;box-shadow: 3px 3px 5px 5px #C0C0C0;box-sizing: border-box;padding-top: 0.3rem;opacity: 0;background-color: white;display: none;">
			<div class="container" style="position: relative;" >				
			<button class="btn btn-default" id="loginBtn" style="position: absolute;right: 0;top:-0.9rem;border-bottom: none;">登陆</button>
				<div class="panel panel-default"   >
					<div class="panel-heading text-center">
						<span>Register</span>
					</div>
					<div class="panel-body" style="position: relative;padding-top: 1rem;">					
							<div class="errorTit" class="text-center " style="height: 0.7rem;line-height: 0.7rem; position: absolute;top: 0;left:16px; display: none;z-index: 1000;background-color:lightcoral;color: white;padding-left: 10px;padding-right: 10px;">
									<span class="glyphicon glyphicon-warning-sign"></span>&nbsp;&nbsp;<span id="errtitle">用户名密码错误</span>
							</div>
						<form action="/user/login" method="post" class="bs-example bs-example-form" role="form" autocomplete="off">						
									<div class="input-group">
									<!-- pattern="^1[34578][0-9]{9}$"-->
									<input class="form-control" type="text" name="phoneNum" id="phoneNum" value="" placeholder="请输入手机号码" pattern="^1[3|4|5|7|8]\d{9}$" />
									<label for="phoneNum" class="input-group-addon">*&nbsp;手机号码:</label>
								</div>
								<div class="input-group" style="border-radius: 5px 0 0 5px;">
									<label  id="getVCode" class="input-group-addon active "  >*&nbsp;获取验证码:</label>																
									<input class="form-control" type="text" name="icode" id="icode" value="" placeholder="验证码" pattern="^\d{6}$" />								
								</div>						
									<button id="validate" type="button" class="btn btn-info pull-right">验证</button>							
								<div class="next" style="display: none;" >						
									<div class="input-group">									
										<input class="form-control" type="password" name="pwd1" id="pwd1" title="请输入6-8位密码" required value="" placeholder="请输入密码" autocomplete="off" pattern="^[0-9a-zA-Z]{6,8}"/>
										<label for="pwd1" class="input-group-addon">密码:&nbsp;*</label>
									</div>
									<div class="input-group">								
										<label for="pwd2" class="input-group-addon"  >*&nbsp;确认密码:</label>
										<input class="form-control" type="password" name="pwd2" id="pwd2" required value="" placeholder="请输入密码" autocomplete="off" />
									</div>							
										<input  class="btn btn-success pull-right" type="submit" value="注册" />																														
								</div>																		
						</form>					
					</div>
					<div class="panel-footer">
						<p class="text-danger">前面带 * 为必填信息</p>
						<p class="text-danger">点击获取验证按钮可以获取验证码</p>
					</div>
				</div>
			</div>
		</div>
		</section>
		<!-- 忘记密码注册表单 -->
		<section id="forget-form" class="turn"  style="position: absolute;top: 3rem;transform-style:preserve-3d ;display: none;width: 100%;">
			<div class="container" style="position: relative;" >
				<div class="panel panel-default" style="box-shadow: 0px 0px 5px 2px #ccc;">
					<div class="panel-heading">
						<h1 style="font-size: 20px;">忘记密码</h1>
						<button type="button" class="btn btn-danger sbackLogin"   >返回登陆</button>
					</div>
					<div class="panel-body" style="padding-top:1rem;padding-bottom: 0.5rem;position: relative;">
						<div class="errorTit" class="text-center " style="height: 0.7rem;line-height: 0.7rem; position: absolute;top: 0;left:16px; display: none;z-index: 1000;background-color:lightcoral;color: white;padding-left: 10px;padding-right: 10px;">
									<span class="glyphicon glyphicon-warning-sign"></span>&nbsp;&nbsp;<span id="err-fgt"></span>
							</div>
						<form class="forget-form" method="post" autocomplete="off">
							<div class="fgtPre">
								<div class="input-group">
									<label for="fPhone" class="input-group-addon">*&nbsp;手机号码</label><input type="text" name="fPhone" id="fPhone" required value="" class="form-control" placeholder="请填写注册时登记的手机号码" pattern="^1[3|4|5|7|8]\d{9}$" />
								</div>
								<div class="input-group">
									<input type="text" name="fgtCode" id="fgtCode" required value="" class="form-control" placeholder="填写验证码" pattern="^\d{6}$" />
									<label for="fgtCode" class="input-group-addon" id="getCode" >*&nbsp;获取验证码</label>
								</div>
								
								<button type="button" class="btn btn-primary pull-right" id="fValidate" >验证</button>
								
							</div>
							<div class="fgtNext" style="display: none;">
								<div class="input-group">
									<label for="newPwd" class="input-group-addon">新密码</label><input type="password" name="newPwd" id="newPwd" placeholder="重设密码" required  pattern="^[0-9a-zA-Z]{6,8}" />								
								</div>
								<div class="input-group">
									<label for="rePwd" class="input-group-addon">确认密码</label><input type="password" name="rePwd" id="rePwd" placeholder="确认密码" required  pattern="^[0-9a-zA-Z]{6,8}" />								
								</div>
								<button type="button" class="btn btn-primary" id="prevBtn" >prev</button>
								<input type="submit" class="btn btn-success pull-right"  value="提交" />
							</div>
						</form>
						
						
						
					</div>
					<div class="panel-footer">
						<p class="text-danger">* 请填写注册时登记的手机号码</p>
					</div>
				</div>
			</div>
		</section>
		
	</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bmob-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
<script src="javaScripts/register2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

</script>
